@extends('layouts.head')

@section('content')
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 164px;
    height: 164px;
    line-height: 164px;
    text-align: center;
  }
  .avatar {
    width: 164px;
    height: 164px;
    display: block;
  }
</style>
<section class="content-header" id="content-header">
商品信息

</section>

<section class="content" id="content">
<div class="box box-solid" >
  <div class="box-header with-border">
    <el-button-group>
          <el-button @click="addGoodsV = true " type="primary"  size="small" >添加</el-button>
          <el-button @click="getNew"   size="small" >刷新</el-button>
          <el-button  @click="editRow()"  :disabled="!isCheckOne"  size="small">编辑</el-button>
          <el-button  @click="upRow()"  type="primary"   size="small">上架</el-button>
          <el-button  @click="downRow()"  type="primary"   size="small">下架</el-button>
          <el-button  @click="delRow()" type="danger" size="small">删除</el-button>
    </el-button-group> 
    <el-button size="small" type=""  @click="yesterday" icon="arrow-left"></el-button>
    <el-date-picker v-model="date" style="width: 120px" size="small" type="date" placeholder="选择日期" > </el-date-picker>
    <el-button  size="small" type="" @click="tomorrow"  icon="arrow-right" ></el-button>
      <button class="mdui-btn btn-info mdui-btn-dense mdui-btn-raised " @click="getAll" >全部</button>
    <button class="mdui-btn btn-info mdui-btn-dense mdui-btn-raised " @click="getNew" >新商品</button>
    <button class="mdui-btn btn-info mdui-btn-dense mdui-btn-raised " @click="getUp" >已上架</button>
    <button class="mdui-btn btn-info mdui-btn-dense mdui-btn-raised " @click="getDown" >已下架</button>


</el-input>
  </div>
  <div class="box-body " >
         <el-table ref="multipleTable" :data="goods" border bordertooltip-effect="dark" border="true"  highlight-current-row
    @current-change="lookRow"   @selection-change="checkOne" style="width: 100%;font-size: xx-small;" >
            <el-table-column type="selection" width="40">  </el-table-column>
            <el-table-column  fixed="left" type="index" width="40" > </el-table-column>
            <el-table-column  fixed="left" label="品名" prop="name"  width="160"> </el-table-column>
            <el-table-column  label="图片"  width="160">
                <template scope="scope">
                    <el-card :body-style="{ padding: '0px' }">
                   
                      <img :src=scope.row.img class="image " style="width: 100px">
                    </el-card>
                </template>
            </el-table-column>
            <el-table-column  prop="size" label="规格" > </el-table-column>
            <el-table-column  prop="unit" label="单位" >  </el-table-column>
            <el-table-column  prop="price" label="重量（g）" > </el-table-column>
            <el-table-column  prop="discount" label="价钱" > </el-table-column>
<!--             <el-table-column fixed="right"  label="操作"  width="120">
                <template scope="scope">
                  <el-button-group>
                     
                      <el-button  @click="editRow(scope.row.id, goods)" type="primary" icon=" " size="mini">编辑</el-button>
                      <el-button  @click="delRow(scope.row.id, goods)" type="danger" icon=" " size="mini">删除</el-button>
                  </el-button-group>     
                </template>
            </el-table-column> -->
        </el-table>
        </br>
        <div class="block">
            <el-pagination @size-change=""  @current-change="getgoodsCurrentPage" :current-page="goodsCurrentPage" :page-size="15" layout="total, prev, pager, next, jumper" :total="goodsCount">
            </el-pagination>
        </div>
  </div>
</div>


<Modal v-model="addGoodsV"  title="普通的Modal对话框标题" @on-ok="submitAddGoods"  @on-cancel="addGoodsV = false" width="580">
    <table  class="table table-hover">
      <thead>   
      </thead>
      <tr>
       <td style="width: 45px" >商品名称</td>
        <td>  
              <el-input v-model="addGoodsItem.name" size="small"  placeholder="请输入内容"></el-input>
        </td>
        <td style="width: 45px" >品牌</td>
        <td>  
              <el-select  v-model="addGoodsItem.brand"   size="small"   filterable  placeholder="选择品牌">
                  <el-option v-for="item in brand"  :key="item.name"   :label="item.name"  :value="item.name"></el-option>
              </el-select>
        </td>
        
      </tr>
      <tr>
        <td style="width: 45px" >单价</td>
        <td>  
              <el-input v-model="addGoodsItem.price"  size="small" placeholder="请输入内容"></el-input>
        </td>
          <td style="width: 45px" >折扣</td>
        <td>  
              <el-input v-model="addGoodsItem.discount"  size="small" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
      <td style="width: 45px" >颜色</td>
        <td>  
              <el-select  v-model="addGoodsItem.color"   size="small"   filterable allow-create  placeholder="选择颜色">
                  <el-option v-for="item in color"  :key="item.name"   :label="item.name"  :value="item.name"></el-option>
              </el-select>
        </td>
        <td style="width: 45px" >尺寸</td>
        <td>  
              <el-select  v-model="addGoodsItem.size"   size="small"   filterable  placeholder="选择尺寸">
                  <el-option v-for="item in size"  :key="item.name"   :label="item.name"  :value="item.name"></el-option>
              </el-select>
        </td>
      </tr>
      <tr>
      <td style="width: 45px" >图片</td>
        <td colspan="3" >
        <el-upload
                  class="avatar-uploader"
                   action="{{asset('img/post/')}}"
                  :show-file-list="false"
                  :on-success="addGoodsImg"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
        </td>
      </tr>

      
    </table>
</Modal>



<el-dialog title="修改商品" :visible.sync="editGoodsV"   >
  <table  class="table table-hover">
      <thead>   
      </thead>
      <tr>
       <td style="width: 45px" >商品名称</td>
        <td>  
              <el-input v-model="editGoodsItem.name" size="small"  placeholder="请输入内容"></el-input>
        </td>
        <td style="width: 45px" >品牌</td>
        <td>  
              <el-select  v-model="editGoodsItem.brand"   size="small"   filterable  placeholder="选择品牌">
                  <el-option v-for="item in brand"  :key="item.name"   :label="item.name"  :value="item.name"></el-option>
              </el-select>
        </td>
        
      </tr>
      <tr>
        <td style="width: 45px" >单价</td>
        <td>  
              <el-input v-model="editGoodsItem.price"  size="small" placeholder="请输入内容"></el-input>
        </td>
          <td style="width: 45px" >折扣</td>
        <td>  
              <el-input v-model="editGoodsItem.discount"  size="small" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
      <td style="width: 45px" >颜色</td>
        <td>  
              <el-select  v-model="editGoodsItem.color"   size="small"   filterable allow-create  placeholder="选择颜色">
                  <el-option v-for="item in color"  :key="item.name"   :label="item.name"  :value="item.name"></el-option>
              </el-select>
        </td>
        <td style="width: 45px" >尺寸</td>
        <td>  
              <el-select  v-model="editGoodsItem.size"   size="small"   filterable  placeholder="选择尺寸">
                  <el-option v-for="item in size"  :key="item.name"   :label="item.name"  :value="item.name"></el-option>
              </el-select>
        </td>
      </tr>
      <tr>
      <td style="width: 45px" >图片</td>
        <td colspan="3" >
        <el-upload
                  class="avatar-uploader"
                   action="{{asset('img/post/')}}"
                  :show-file-list="false"
                  :on-success="editGoodsImg"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
        </td>
      </tr>

      
    </table>

  
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editGoodsV = false">取 消</el-button>
    <el-button type="primary" @click="submitEditGoods">确 定 </el-button>
  </span>
</el-dialog>



</section>
<script >
    var content =new Vue({
        el:'#content',
        data:{
            date:'<?php echo date('Y-m-d') ?>',
            company:'{{ Auth::user()->company }}',
            addGoodsV:false,
            editGoodsV:false,
            clients:[],
            goods:[],
            color:[],
            size:[],
            brand:[],
            goodsChrildren:[],
            goodsCount:1,
            goodsCurrentPage:1,
            type:0,
            addGoodsItem:{_token:'',name:'',company:'{{ Auth::user()->company }}',brand:'',color:'',size:'',img:''},
            editGoodsItem:{_token:'',name:'',brand:'',color:'',size:'',img:''},
            multipleSelection: [],
            imgV:false,
            imgUrl:'',
        },
        created:function(){
            this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
            this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ }); 
            this.$http.get('/brand/getAll/'+this.company).then((response) => {this.brand=response.data; console.log(response.data)},(response) =>{ });
            this.$http.get('/color/getAll/'+this.company).then((response) => {this.color=response.data; console.log(response.data)},(response) =>{ });    
            this.$http.get('/size/getAll/'+this.company).then((response) => {this.size=response.data; console.log(response.data)},(response) =>{ });                 

        },
        computed: {
              isCheckOne:function(){
                if( this.multipleSelection.length == 1 ){
                  return true;
                }else{
                  return false;
                }
              }
        },
        methods:{
              addGoodsImg(res, file) {
                      this.imgUrl='{{asset('')}}'+res
                      this.addGoodsItem.img='{{asset('')}}'+res
                    },
              editGoodsImg(res, file) {
                      this.imgUrl='{{asset('')}}'+res
                      this.editGoodsItem.img='{{asset('')}}'+res
                    },
              beforeAvatarUpload(file) {
                      const isJPG = file.type === 'image/jpeg';
                      const isLt2M = file.size / 1024 / 1024 < 2;

                      if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                      }
                      if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                      }
                      return isJPG && isLt2M;
                    },
              getNew:function(){
                 
                  this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });       
                  this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ });

              },
              getAll:function(){
                
                  this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });       

                  this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ });

              },
              getUp:function(){
                 
                  this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });       

                  this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ });

              },
              getDown:function(){
                 
                  this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });       

                  this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ });

              },
              
              search:function(){
                  console.log(this.searchWord);
                  this.$http.get('/goods/search/'+this.searchWord).then((response) => {this.goods=response.data; this.goodsCount = this.goods.length;console.log('word,goods,success')},(response) =>{ console.log(response);}); 
                  
              } ,
              yesterday:function(){
                  console.log('yesterday');
              },
              tomorrow:function(){
                  console.log('tomorrow');
              },
              submitAddGoods:function(){
                  console.log('submitAddGoods');
                  this.addGoodsV = false;
                  this.addGoodsItem._token = '{{csrf_token()}}';
                  this.$http.post('/goods/add',this.addGoodsItem).then((response)=>{this.$notify.success('添加成功');
                              this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                              this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });       

                        },(response) =>{ this.$notify.error('未知错误')});

              },
              submitEditGoods:function(){
                  console.log('submitEditGoods');
                  this.editGoodsV = false;
                  this.editGoodsItem._token = '{{csrf_token()}}';
                  this.$http.post('/goods/update/'+this.editGoodsItem.id,this.editGoodsItem).then((response)=>{this.$notify.info(response.data);
                              this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                              this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });        

                        },(response) =>{ });
              },
              cancelAddGoods:function(){
                  console.log('cancelAddGoods');
              },
              lookRow:function(val){
                  console.log(val);
              },
              editRow:function(){
                 this.editGoodsV=true;
                 this.editGoodsItem=this.multipleSelection[0]
                  console.log(this.editGoodsItem);
              },
              delRow:function(val){
                  console.log(val);
                  this.$http.post('/goods/del',{_token:'{{csrf_token()}}',date:this.multipleSelection}).then((response) => {this.$notify.info(response.data);
                                this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                                this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });       

                          },(response) =>{ }); 

              },
              getgoodsCurrentPage:function(val){
                  console.log(val);
                  this.goodsCurrentPage=val;
                  this.$http.get('/goods/getCurrent/'+this.goodsCurrentPage+'/'+this.company).then((response) => {this.goods=response.data; console.log(response.data)},(response) =>{ }); 
                  this.$http.get('/goods/getCount/'+this.company).then((response) => {this.goodsCount=response.data; console.log(response.data)},(response) =>{ });       
              },
            
              checkChange:function(rows){
                     if (rows) {
                        rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row);
                        });
                      } else {
                        this.$refs.multipleTable.clearSelection();
                      }
              }, 
              checkOne:function (val) {
                console.log('11');
                console.log(val);
                this.multipleSelection = val;
              } ,
         },

  });
</script>




@endsection

@section('pagejs')

@endsection

        




